<template>
  <Form :data="model" @ok="onOk()" layout="vertical" :opProps="{ justify: 'start', fill: true }">
    <FormItem field="username" required>
      <Input v-model="model.username" placeholder="用户名/手机/Email/证件号">
        <template #prefix>
          <IconUser />
        </template>
      </Input>
    </FormItem>
    <FormItem field="password" required>
      <Input type="password" v-model="model.password" placeholder="密码">
        <template #prefix>
          <IconLock />
        </template>
      </Input>
    </FormItem>
    <template #op>
      <Button type="primary" block htmlType="submit" :loading="okLoading" text="登录" />
    </template>
  </Form>
</template>

<script setup lang="ts">
import { Button, Form, FormItem, Input } from '@idmy/ui'
import { IconLock, IconUser } from '@idmy/ui-icon'
import { passwordLogin } from './services'
import { Data } from '@idmy/core'

const model = reactive<Data>({
  state: undefined,
  username: undefined,
  password: undefined,
})

const [onOk, okLoading] = useLoading(async () => {
  try {
    await passwordLogin(model)
  } catch {
    model.state = undefined
  }
})
</script>
